/*
 * @description:
 * @version:
 * @Author: 王治飞
 * @Date: 2023-08-17 14:25:38
 * @LastEditors: 王治飞
 * @LastEditTime: 2023-08-17 16:59:32
 */
import IconGlobal from '@/assets/svg/icon_global'
import IconMenu from '@/assets/svg/icon_menu'
import IconPicture from '@/assets/svg/icon_picture'
import React, { memo, useEffect, useState } from 'react'

const Right = memo(() => {
  const [showPanel, setShowpanel] = useState(false)
  useEffect(() => {
    function bindClickWindow() {
      setShowpanel(false)
    }
    window.addEventListener('click', bindClickWindow, true)
    return () => {
      window.removeEventListener('click', bindClickWindow, true)
    }
  }, [])
  function changeShowpanel() {
    setShowpanel(true)
  }

  return (
    <div className="right">
      <span className="bord-hover login">登录</span>
      <span className="bord-hover register">注册</span>
      <span className="bord-hover global">
        <IconGlobal />
      </span>
      <span className="more" onClick={changeShowpanel}>
        <IconMenu />
        <IconPicture />
        {showPanel && (
          <div className="more-content">
            <span className="item">登录</span>
            <span className="item">注册</span>
            <span className="item">注册</span>
            <span className="line"></span>
            <span className="item">出租房源</span>
            <span className="item">开展体验</span>
            <span className="item">帮助</span>
          </div>
        )}
      </span>
    </div>
  )
})

export default Right
